<template>
  <div>
    <div class="box1">
    </div>
    <!--    指定一个容器 , 来获取用户的请求消息-->
    <div class="box2">
      <GeminiScrollbar autoshow class="my-scroll-bar">
        <!--      循环所有的朋友列表-->
        <span v-for="(friend , index) in this.request" :key="index">

          <!--      展示用户的所有的请求消息-->
          <div class="div1">
            <!--        展示用户的头像-->
            <div class="span1">
            <el-row>
            <el-avatar :size="60" :src="friend.url"></el-avatar>
            </el-row>
            </div>
            <!--        存放用户的名字 , 账号 和 请求消息-->
            <div class="div2">
              <h4 class="p1">{{ friend.name }}</h4>
              <p class="p2">{{ friend.mess }}</p>
            </div>

            <!--            展示添加 , 拒绝按钮 -->
            <div class="div3">
              <button class="but1" @click="agree(friend)">同 意</button>
              <button class="but2" @click="repulse(friend)">拒 绝</button>
            </div>
          </div>
        </span>
      </GeminiScrollbar>
    </div>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import tim from "@/tim";

export default {
  name: "Request",
  data() {
    return {
      request: [
        // {
        //   url: require("@/assets/image/00.jpg"),
        //   fasong: "13123456781",
        //   name: "小米",
        //   mess: "我是你的粉丝 , 来找我啊"
        // },
      ]

    }
  },

  computed: {
    ...mapGetters(['id', 'name', 'avatar',]),
  },
  //函数
  methods: {

    //获取当前用户的请求信息
    getRequest() {
      console.log("获取 , 请求 , 进来了");
      this.$store
        .dispatch("user/selectRequest")
        .then(data => {
          //清空 , 数据
          this.request = [];
          //数据 , 请求成功 , 把数据 , 保存到数组里面
          for (var i = 0; i < data.data.user.length; i++) {
            //  把用户 , 保存到 , 数组里面
            console.log(data.data.user[i].password + "" + i);
            this.request.push({
              url: data.data.user[i].avater,
              fasong: data.data.user[i].id,
              name: data.data.user[i].name,
              mess: data.data.user[i].password,
            })
          }
          this.$message({message: '恭喜你，请求列表 , 获取成功!', type: 'success'});
          return true;
        })
        .catch((error) => {
          console.log("获取用户失败" + error);
          this.loading = false
        })
    },
    //同意的按钮
    agree(friend) {
      //  向服务端发送一个请求 , 同意请求消息
      this.$store
        .dispatch("user/consent", friend.fasong)
        .then(() => {
          //向自己的好友列表 , 保存一条消息
          this.$store.commit('user/ADD_FRIEND', {
            id: friend.fasong,
            name: friend.name,
            url: friend.url
          })
          //创建一个 自定义的消息 , 向对方发送一个自定义的消息 , 保存当前用户的信息 ,
          const message = tim.createCustomMessage({
            to: friend.fasong,   //消息的接受方
            conversationType: TIM.TYPES.CONV_C2C,  //消息的类型 , 端到端
            payload: {
              data: 'ADD_REQUEST', //指定同意请求消息的消息
              description: this.id + "-" + this.name + '-' + this.avatar
            }
          })
          console.log("自定义消息 , 创建成功");
          //开始发送消息
          tim.sendMessage(message).then(() => {
            //用户删除成功 , 则删除用户
            this.$message({message: '好友添加成功!', type: 'success'});
          })
          //删除数组里面的关于此用户的请求消息
          this.deletefriend(friend.fasong);
          return true;
        })
        .catch((error) => {
          console.log("获取用户失败" + error);
          this.loading = false
        })
    },
    // 拒绝的按钮 , 拒绝用户的请求信息 ,refuse
    repulse(friend) {
      //  向服务端发送一个请求 , 拒绝请求消息
      this.$store
        .dispatch("user/refuse", friend.fasong)
        .then(() => {
          //删除数组里面的关于此用户的请求消息
          this.deletefriend(friend.fasong);
          this.$message({message: '好友请求消息 拒绝 成功!', type: 'success'});
          return true;
        })
        .catch((error) => {
          console.log("获取用户失败" + error);
          this.loading = false
        })
    },
    deletefriend(userid) {
      for (var i = 0; i < this.request.length; i++) {
        //判断 , 如果账号 , 相同 , 则删除这个消息
        if (this.request[i].fasong == userid) {
          //移除一个元素
          this.request.splice(i, 1);
          i = -1;
        }
      }
    },
  },
}
</script>

<style scoped>

.div1:hover {
  background-color: #b3d8ff;
}

.but1 {
  background-color: #8ee1f5;
}

.but2 {
  background-color: #f6e6ac;
}

/*按钮*/
button {
  width: 70px;
  height: 30px;
  margin-top: 3px;
  color: #111111;
}

.div3 {
  height: 100%;
  width: 67px;
}

/*<!-- 指定向右放-->*/
.p1 {
  margin-left: 30%;
  margin-top: 3%;
  margin-right: 160px;
}

.p2 {
  margin-left: 10%;
  font-size: 15px;
  color: #b0b0c4;
}

.span1 {
  padding-left: 20px;
  margin-top: 5px;

}

.div2 {
  width: 440px;
  height: 100%;

}

/*<!--设置span1的高 ,边框-->*/
.div1 {
  display: flex;
  height: 80px;
  border-bottom: 1px solid #b3d8ff;
  padding-top: 5px;
  padding-bottom: 5px;
}

.box1 {
  background-color: #ebeef5;
  height: 40px;
  line-height: 40px;
}

.box2 {
  width: 600px;
  height: 500px;
  margin: 0 auto;
}
</style>
